<template>
    <div>
        <img class="pic" src="@/assets/img/loginbg/loginbg.png"/>
        <div class="login" v-show="showLogin">
            <van-form @submit="loginSubmit">
                <van-field
                        v-model="username"
                        name="username"
                        label="用户名"
                        placeholder="用户名"
                        :rules="[{ required: true, message: '请填写用户名' }]"
                />
                <van-field
                        v-model="password"
                        type="password"
                        name="password"
                        label="密码"
                        placeholder="密码"
                        :rules="[{ required: true, message: '请填写密码' }]"
                />
                <div  class="subButton">
                    <van-button type="primary" round block native-type="submit">提交</van-button>
                </div>
            </van-form>
            <div class="details">
                <span @click="resign">注册</span>&ensp;
                <span @click="forget">忘记密码</span>
            </div>
        </div>
        <div class="resign" v-show="showResign">
            <van-form @submit="resignSubmit">
                <van-field
                        v-model="resignName"
                        name="resignName"
                        placeholder="请填写用户名"
                        :rules="[{ required: true, message: '请填写用户名' }]"
                />
                <van-field
                        v-model="resignPass"
                        name="resignPass"
                        placeholder="请填写密码"
                        :rules="[{ validator, message: '密码长度应在6-50之间' }]"
                />
                <van-field name="resignSex" label="请选择性别">
                    <template #input>
                        <van-radio-group v-model="resignSex" direction="horizontal">
                            <van-radio name="0">女</van-radio>
                            <van-radio name="1">男</van-radio>
                            <van-radio name="2">保密</van-radio>
                        </van-radio-group>
                    </template>
                </van-field>

                <van-field
                        v-model="resignPhone"
                        name="resignPhone"
                        placeholder="请填写手机号"
                        :rules="[{ pattern, message: '请填写正确手机号' }]"
                />
                <div  class="subButton">
                    <van-button type="primary" round block native-type="submit">提交</van-button>
                </div>
            </van-form>
        </div>
        <div class="forget" v-show="showForget">
            <van-form @submit="forgetSubmit">
                <van-field
                        v-model="forgetPhone"
                        name="forgetPhone"
                        placeholder="请填写手机号"
                        :rules="[{ pattern, message: '请填写正确手机号' }]"
                />
                <div  class="subButton">
                    <van-button type="primary" round block native-type="submit">提交</van-button>
                </div>
            </van-form>
        </div>
    </div>
</template>

<script>
    import login from '@/api/login';
    import {Toast} from 'vant';

    export default {
        name: "login",
        data() {
            return {
                username: '',
                password: '',
                showLogin: true,
                showForget:false,
                showResign:false,
                resignName:'',
                resignPass:'',
                resignSex:'2',
                resignPhone:'',
                pattern:/^(13[0-9]|14[5-9]|15[012356789]|166|17[0-8]|18[0-9]|19[8-9])[0-9]{8}$/,
                forgetPhone:'',
            }
        },
        created() {
            //用于初始化数据
            //一般数据请求都放在created里
        },
        mounted() {
            //也可以初始化数据，如果初始化的数据必须依赖dom元素，则可以在mounted里使用
            //使用场景：使用ref操作获取数据。会在页面加载出来后再填充数据，而created会在页面没加载就获取数据，会导致使用ref获取不了值。
        },
        methods: {
            //登录
            loginSubmit(values) {
                if (values.username != '' && values.password != '') {
                    login.loginIn({'userName':this.username,'password':this.password}).then(response =>{
                        //设置用户名密码
                        if (response.code === 200) {
                            /*this.$store.dispatch('setName', response.data.userName);
                            this.$store.dispatch('setPasswd', response.data.password);*/
                            // localStorage.setItem("token",response.data.token.toString())
                            this.$router.push('/todayProfit');
                        } else {
                            Toast(response.message+'');
                        }
                    }).catch(error => {
                        console.log(error);
                    })
                }
            },

            resign(){
                this.showLogin = false;
                this.showResign = true;
            },
            forget(){
                this.showLogin = false;
                this.showForget = true;
            },

            //校验密码长度
            validator(val){
                return val.length < 6 ? false : (val.length > 50 ? false : true);
            },

            sleep(numberMillis) {
                var now = new Date();
                var exitTime = now.getTime() + numberMillis;
                while (true) {
                    now = new Date();
                    if (now.getTime() > exitTime)
                    return;
                }
            },
            //注册
            resignSubmit(values){
                login.resign({'userName':this.resignName,'password':this.resignPass,'sex':this.resignSex,'phone':this.resignPhone}).then(response =>{
                    if (response.code === 200) {
                        Toast(response.data);
                        this.sleep(500);
                        this.showResign = false;
                        this.showLogin = true;
                        this.username = this.resignName;
                        this.password = this.resignPass;
                    } else {
                        Toast(response.message+'');
                    }
                }).catch(error => {
                    console.log(error);
                })
            },
            //忘记密码
            forgetSubmit(values){
                login.forget({'phone':this.forgetPhone}).then(response =>{
                    if (response.code === 200) {
                        Toast(response.data.msg);
                        this.username = response.data.user.userName;
                        this.password = response.data.user.password;
                        this.showForget = false;
                        this.showLogin = true;
                    } else {
                        Toast(response.message+'');
                    }
                }).catch(error => {
                    console.log(error);
                })
            }
        }
    }
</script>

<style scoped>
    .pic {
        width: 100%;
        height: 100%;
        position: absolute;
    }
    .login{
        top: 30%;
        left: 10%;
        right: 10%;
        position: absolute;
    }
    .subButton{
        margin:30px 60px;
    }
    .van-field{
        border-radius: 10px;
        margin-bottom: 10px;
        opacity: 0.8;
    }
    .details{
        margin-top: 5%;
        text-align: center;
        font-size: 15px;
        /*font-weight: 300;*/
        font-weight: bolder;
        color: #E96141;
    }
    .resign{
        top: 30%;
        left: 10%;
        right: 10%;
        position: absolute;
    }
    .forget{
        top: 30%;
        left: 10%;
        right: 10%;
        position: absolute;
    }
</style>
